<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>英雄管理主页</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />
    <style>
      .panel {
        width: 900px;
        margin: 10px auto;
      }
      .table img {
        width: 40px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">英雄列表管理</div>
        <div class="panel-body">
          <!-- 存放的搜索区域 -->
          <div class="row">
            <div class="col-lg-6">
              <div class="input-group">
                <input type="text" id="hname" class="form-control" placeholder="输入英雄信息..." />
                <span class="input-group-btn">
                  <button class="btn btn-default" id="btn_search" type="button">搜索</button>
                </span>
              </div>
              <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
            <div class="col-lg-3 col-lg-offset-3">
              <!-- 添加英雄的按钮 -->
              <!-- 
              🧨调用模态框的两个属性：
                  data-toggle="modal"                 🧨 调用切换模态框功能
                  data-target="#exampleModal"         🧨 要调用哪个模态框
            -->
              <button
                data-toggle="modal"
                data-target="#exampleModal"
                type="button"
                class="btn btn-success"
              >
                添加英雄
              </button>
            </div>
          </div>
        </div>

        <!-- Table -->
        <table class="table">
          <thead>
            <tr>
              <th>编号</th>
              <th>英雄名称</th>
              <th>英雄性别</th>
              <th>头像</th>
              <th>操作区</th>
            </tr>
          </thead>
          <!-- 表格主体 -->
          <tbody id="tbody">
            <!-- tr 是一行内容 -->
            <tr>
              <td>1</td>
              <td>大乔</td>
              <td>女</td>
              <td><img src="" /></td>
              <td>
                <button type="button" class="btn btn-warning">上传头像</button>
                <button type="button" class="btn btn-danger">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 上传按钮  display: none; 把按钮隐藏起来，但是点击按钮还是可以实现上传的 -->
      <input type="file" id="uploadFile" style="display: none" />

      <!-- 🧨模态框的结构 - CV过来的 -->
      <div
        class="modal fade"
        id="exampleModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title" id="exampleModalLabel">添加英雄</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">英雄名称:</label>
                  <input
                    type="text"
                    placeholder="请输入英雄名称"
                    class="form-control"
                    id="heroName"
                  />
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">英雄性别:</label>
                  <label><input type="radio" checked value="男" name="gender" /> 👦男生</label>
                  <label><input type="radio" value="女" name="gender" /> 👩‍🦰女生</label>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button id="addHeroBtn" type="button" class="btn btn-primary">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 🧨 必须先引入 jquery.js 再引入 bootstrap.js -->
    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.js"></script>
    <script>
      $(function () {
        $.ajaxSetup({
          headers: {
            Authorization: localStorage.getItem('token'),
          }
        });
        /* 
        上传英雄头像
          1. 点击弹出上传文件窗口
          2. 上传按钮值发生改变时，把图片上传到服务器
          3. 图片上传成功，服务器会返回图片的在服务端的路径
          4. 把图片路径更新到英雄信息中
          5. 重新获取英雄列表数据
      */

        // 1.5 调用封装好的函数
        getHeroList()

        // 🎁 2.1 搜索按钮绑定点击事件
        $('#btn_search').click(() => {
          // 🎁 2.2 调用获取英雄的函数
          getHeroList()
        })

        // 3.1 点击添加英雄
        $('#addHeroBtn').click(() => {
          // console.log('点击添加英雄');
          const heroName = $('#heroName').val().trim()
          // :checked 获取选中状态的单选框
          const gender = $('[name="gender"]:checked').val()
          // console.log(heroName);
          // console.log(gender);

          // 面向接口编程，调用接口
          $.ajax({
            method: 'POST',
            url: 'http://127.0.0.1:3001/hero/addHero',
            data: {
              name: heroName,
              gender: gender,
              img: '',
            },
            
            success: (res) => {
              // console.log(res)
              // 隐藏模态框
              $('#exampleModal').modal('hide')
              // 重新获取所有英雄数据，并替换到原本的 tbody 布局中
              getHeroList()
            }
          })
        })

        // 4.1 删除英雄 -
        //    1. 事件委托方式绑定事件，因为删除按钮是动态创建的
        //    2. 用 function 书写回调函数，因为事件处理函数内部需要用到 this
        $('#tbody').on('click', '.btn-danger', function () {
          // 获取自定义 id
          const id = $(this).attr('data-id')
          // console.log('你点击删除按钮的自定义id为', id);
          // 面向接口编程，调用根据 id 删除英雄的接口
          $.ajax({
            method: 'GET',
            url: 'http://127.0.0.1:3001/hero/delHeroById',
            data: { id: id },
            headers: {
              Authorization: localStorage.getItem('token'),
            },
            success: (res) => {
              console.log(res)
              // 服务器删除英雄成功，浏览器端重新获取英雄列表
              getHeroList()
            },
          })
        })

        // 😨 5.1 上传头像按钮点击
        $('#tbody').on('click', '.btn-warning', function () {
          console.log('你点击了上传头像的按钮')
          // 调用真正的上传文件按钮
          $('#uploadFile').click()
          // 获取列表按钮中的自定义 id 属性
          const id = $(this).attr('data-id')
          // 把自定义 id 属性添加到 真正的上传按钮中
          $('#uploadFile').attr('data-id', id)
        })

        // 😨 5.2 真正的上传按钮
        $('#uploadFile').change(function () {
          // 获取元素身上的 id ，用于后期更新图片的
          const id = $(this).attr('data-id')
          console.log(id)
          // 获取文件对象
          const filesObj = $('#uploadFile').get(0).files[0]
          // console.log(filesObj);

          // 准备 FormData 对象，以后作为 ajax 的请求参数
          const fd = new FormData()
          fd.append('file_data', filesObj)

          // Ajax 请求，注意 FormData 上传的时候注意的 3 个问题
          $.ajax({
            method: 'POST',
            url: 'http://127.0.0.1:3001/hero/uploadFile',
            data: fd, // FormData 直接作为参数
            headers: {
              Authorization: localStorage.getItem('token'),
            },
            processData: false, // 无需 jq 处理数据
            contentType: false, // 无需 jq 处理内容类型
            success: (res) => {
              console.log(res.src)
              // 更新头像
              $.ajax({
                method: 'POST',
                url: 'http://127.0.0.1:3001/hero/updateHero',
                data: {
                  id: id,
                  img: res.src,
                },
                headers: {
              Authorization: localStorage.getItem('token'),
            },
                success: (res) => {
                  // 当图片更新成功后，再获取最新的列表数据
                  getHeroList()
                },
              })
            },
          })
        })

        // 1.1 封装一个获取英雄的函数
        function getHeroList() {
          const heroName = $('#hname').val().trim()
          console.log(heroName)
          // 1.2 面向接口编程，请求三要素
          $.ajax({
            method: 'GET',
            url: 'http://127.0.0.1:3001/hero/getHeroList',
            // 按照规范请求头传递 Authorization
             headers: {
               Authorization: localStorage.getItem('token'),
             },
            data: {
              // 🎁 2.3 接口文档规定：可根据英雄名获取，传空则获取全部英雄
              heroName: heroName,
            },
            // error:(error,res) => {
            //   // debugger
            //   console.dir(error)
            //   console.dir(res)
            // },
            success: (res) => {
              // 1.3 打印出来数据，分析数据的结构
              // console.log(res)
              // if (res.code === -1) {
              //   alert('没有登录权限')
              //   return (location.href = './login.html')
              // }

              // 1.4 把数据渲染到页面中
              let htmlStr = ''
              // 找到英雄列表的数组，forEach 遍历
              res.data.forEach((item, index) => {
                // 字符串拼接
                htmlStr += `<tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.gender}</td>
                            <td><img src="${item.img}"></td>
                            <td>
                              <button type="button" data-id="${item.id}" class="btn btn-warning">上传头像</button>
                              <button type="button" data-id="${item.id}" class="btn btn-danger">删除</button>
                            </td>
                          </tr>`
              })
              // forEach 拼接结束后，一次性写入(覆盖)页面中
              $('#tbody').html(htmlStr)
            },
          })
        }
      })

      $( document ).ajaxError(function( event, request, settings ) {
        if(request.status === 401) {
          alert(request.responseJSON.msg)
          // return (location.href = './login.html')
        }
      });

    </script>
  </body>
</html>
